<template>
	<view class="search">
		<view class="seach-input">
			<u-icon name="arrow-left" size="45" @click="fanh"></u-icon>
			<input type="text" value="" placeholder="请输入" v-model="keyword" @confirm="confirm">
		</view>

		<view class="search-list">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="search-scll">
					<view class="scll-item" v-for="(item,index) in loadmoreList" :key="index" @click="detail(item.id)">
						<image :src="item.goodsimage_text"></image>
						<view class="">{{item.goodsname}}</view>
						<view class="swiper-mouay">
							<text>{{item.goodsprice|xiaos}}</text>
							<text>金币+</text>
							<text>{{item.goodssalenum|xiaos}}</text>
							<text>积分</text>
						</view>
						<text>{{item.salenum}}+人付款</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		goods_list
	} from '@/network/api.js'
	export default {
		data() {
			return {
				// 关键字
				keyword:'',
				page:1,
				loadmoreList:[]
			}
		},
		onLoad(options) {
			this.keyword=options.data
			this.loadmoreRe()
		},
		onReachBottom() {
			this.page++
			this.loadmoreRe()
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		methods: {
			lower: function(e) {
				console.log(e)
			},
			// 返回上一级
			fanh() {
				uni.navigateBack({
					delta: 1
				})
			},
			confirm(){
				this.page=1
				this.loadmoreList=[]
				this.loadmoreRe()
			},
			// 获取商品数据
			loadmoreRe() {
				let data = {
					is_killing:0,
					object: '',
					objectid:'',
					keyword:this.keyword,
					page: this.page,
					pageSize: 5
				}
				goods_list(data).then(res => {
					this.loadmoreList = [...res.data.data, ...this.loadmoreList]
				})
			},
			// 跳转到商品详情页
			detail(id){
				uni.navigateTo({
					url:'/pages/subpackage/shop/productDetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		background-color: #F3F3F3;
		.seach-input {
			display: flex;
			position: sticky;
			top: 0;
			padding: 90rpx 30rpx 20rpx 20rpx;
			// margin-bottom: 40rpx;
			background-color: #fff;

			>input {
				width: 100%;
				height: 60rpx;
				margin-left: 20rpx;
				padding-left: 20rpx;
				background: #fcfcfc;
				border-radius: 30rpx;
				border: 1rpx solid #bc8523;
			}
		}


		.search-list {
			margin: 40rpx 30rpx;

			.scroll-Y {
				height: calc(100vh - 180rpx);

				.search-scll {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.scll-item {
						width: 48%;
						height: 480rpx;
						overflow: hidden;
						margin-bottom: 20rpx;
						border-radius: 10rpx;
						background-color: #fff;

						>image {
							width: 100%;
							height: 330rpx;
						}

						>view:nth-child(2) {
							padding: 10rpx;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-family: PingFang SC, PingFang SC-Bold;
						}

						.swiper-mouay {
							padding: 0 10rpx;
							color: #E80000;

							>text:nth-child(odd) {
								font-size: 30rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: bold;
							}

							>text:nth-child(even) {
								font-size: 20rpx;
							}
						}

						>text {
							display: block;
							padding: 0 10rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>